<template>
  <div class="goods home">
    <div class="top">
      <swiper :options="bannerHome">
        <swiper-slide class="swiper-demo-img" v-for="(item, index) in 5" :key="index"><img src="@/assets/zhihuibao01.png"></swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
      <div class="flex">
        <p class="left" @click="router({path: './goodsOrder'})">
          <img src="@/assets/shangcheng02.png" alt="">
          <span>我的订单</span>
        </p>
        <p class="right" @click="router({path: './cart'})">
          <img src="@/assets/shangcheng03.png" alt="">
          <i>1</i>
          <span>购物车</span>
        </p>
      </div>
    </div>
    <div class="goods-list">
      <div class="classify" @click="is_mask = true">
        <p>
          <span>{{classify_name}}</span>
          <img class="classify-img" src="@/assets/shangcheng05.png" alt="">
        </p>
      </div>
      <div class="list clear">
        <div class="item" @click="router({path: './goodsDetails'})">
          <img src="@/assets/gouwuche02.png" alt="">
          <p class="title">Naef Cublex立方体创Naef Cublex立方体创...</p>
          <p class="price"><span>￥</span>199.00</p>
        </div>
        <div class="item">
          <img src="@/assets/gouwuche02.png" alt="">
          <p class="title">Naef Cublex立方体创Naef Cublex立方体创...</p>
          <p class="price"><span>￥</span>199.00</p>
        </div>
        <div class="item">
          <img src="@/assets/gouwuche02.png" alt="">
          <p class="title">Naef Cublex立方体创Naef Cublex立方体创...</p>
          <p class="price"><span>￥</span>199.00</p>
        </div>
        <div class="item">
          <img src="@/assets/gouwuche02.png" alt="">
          <p class="title">Naef Cublex立方体创Naef Cublex立方体创...</p>
          <p class="price"><span>￥</span>199.00</p>
        </div>
        <div class="item">
          <img src="@/assets/gouwuche02.png" alt="">
          <p class="title">Naef Cublex立方体创Naef Cublex立方体创...</p>
          <p class="price"><span>￥</span>199.00</p>
        </div>
        <div class="item">
          <img src="@/assets/gouwuche02.png" alt="">
          <p class="title">Naef Cublex立方体创Naef Cublex立方体创...</p>
          <p class="price"><span>￥</span>199.00</p>
        </div>
        <div class="item">
          <img src="@/assets/gouwuche02.png" alt="">
          <p class="title">Naef Cublex立方体创Naef Cublex立方体创...</p>
          <p class="price"><span>￥</span>199.00</p>
        </div>
        <div class="item">
          <img src="@/assets/gouwuche02.png" alt="">
          <p class="title">Naef Cublex立方体创Naef Cublex立方体创...</p>
          <p class="price"><span>￥</span>199.00</p>
        </div>
      </div>
    </div>
    <div class="mask-div" v-if="is_mask">
      <div class="mask-bg" @click="is_mask = false"></div>
      <div class="content">
        <div class="classify">
          <p @click="is_mask = false">
            <span>全部商品</span>
            <img class="classify-img" src="@/assets/shangcheng07.png" alt="">
          </p>
        </div>
        <div class="list-item clear">
          <div class="item" :class="(classifyNum == 1) ? 'active' : ''" @click="classify(1, '分类1')">全部商品</div>
          <div class="item" :class="(classifyNum == 2) ? 'active' : ''" @click="classify(2, '分类2')">二阶魔方</div>
          <div class="item" :class="(classifyNum == 3) ? 'active' : ''" @click="classify(3, '分类3')">三阶魔方</div>
          <div class="item" :class="(classifyNum == 4) ? 'active' : ''" @click="classify(4, '分类4')">创意·鲁班系列</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import newsList from '@/components/newsList'
import 'swiper/dist/css/swiper.css'

  export default {
    components: {
      swiper,
      swiperSlide,
      newsList
    },
    data () {
      return {
        bannerHome: {
          loop: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        },
        classifyNum: 0,
        is_mask: false,
        classify_name: '全部商品'
      }
    },
    created () {
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      classify (index, classify_name) {
        this.classifyNum = index
        this.is_mask = false
        this.classify_name = classify_name
      }
    }
  }
</script>

<style lang="stylus" scoped>
.goods
  background-color #f5f5f5
  min-height 100vh
  padding-bottom 5rem
  .top
    background-color #fff
    margin-bottom 1rem 
    .swiper-demo-img
      padding 1rem 1.5rem
      box-sizing border-box
    .swiper-ad-img
      padding 0
    .flex
      display flex
      height 4.5rem
      line-height 4.5rem
      text-align center
      p
        flex 1
        font-size 1.5rem
        color #333
        span
          display inline-block
          vertical-align middle
        img
          display inline-block
          vertical-align middle
          width 1.8rem
          margin-right .5rem
      .right
        position relative
        &::after
          content ''
          position absolute
          left 0
          height 60%
          top 20%
          width 1px
          background-color #e6e6e6
        i
          width 1.4rem
          height 1.4rem
          border .1rem solid #fff
          box-sizing border-box
          background-color #D03718
          font-size .9rem
          font-weight 500
          color #fff
          text-align center
          line-height 1.2rem
          position absolute
          border-radius 50%
          top .8rem
          left 6.7rem
  .goods-list
    background-color #fff
    .classify
      padding 0 1.5rem
      line-height 5.6rem
      height 5.6rem
      color #333
      font-weight 500
      font-size 1.7rem
      position sticky
      border-bottom 1px solid #e6e6e6
      margin-bottom 2rem
      top 0
      background-color #fff
      .classify-img
        position absolute
        width .8rem
        left 9rem
        top 2.6rem
    .list
      padding 0 1.5rem
      .item
        float left
        width calc(50% - .75rem)
        padding-bottom 2rem
        &:nth-child(2n+1)
          margin-right 1.5rem
        .title
          color #000
          font-size 1.5rem
          text-overflow ellipsis
          overflow hidden
          white-space nowrap
          padding 1rem 0
        .price
          color #D03718
          font-size 1.7rem
          height 1.3rem
          line-height 1.3rem
          span
            font-size 1.3rem
  .content
    width 100%
    top 0
    left 0
    background-color #fff
    .classify
      padding 0 1.5rem
      line-height 5.6rem
      height 5.6rem
      color #333
      font-weight 500
      font-size 1.7rem
      position relative
      border-bottom 1px solid #e6e6e6
      top 0
      background-color #fff
      .classify-img
        position absolute
        width .8rem
        left 9rem
        top 2.6rem
    .list-item
      padding 1.5rem
      padding-bottom .5rem
      .item.active
        color #172F6D
        border 1px solid #172F6D
      .item
        border 1px solid #ccc
        color #999
        font-size 1.5rem
        padding .9rem 1.2rem
        float left
        margin-right 1rem
        margin-bottom 1rem
        height 1.5rem
        line-height 1.5rem
</style>
